import React, { useCallback } from 'react'
import { Text, View } from '@tarojs/components'
import style from './CustomSelect.module.scss'

const CustomSelect = ({
  label, options, value, containerStyle, labelStyle, buttonContainerStyle, onChange
}) => {
  const onClick = useCallback(item => {
    onChange?.(item)
  }, [onChange])
  return (
    <View className={`${style.formContainer} ${containerStyle}`}>
      <Text className={`${style.label} ${labelStyle}`}>{label}</Text>
      <View className={`${style.formControl} ${buttonContainerStyle}`}>
        {options?.map((item, index) => {
          const isSelect = value === item.key
          return (
            <Text
              key={index}
              onClick={() => onClick(item)}
              hover-class="tab-active"
              className={`${style.button} ${isSelect ? style.activeStyle : ''} ${index === options.length - 1 ? style.last : ''}`}
            >
              {item.label}
            </Text>
          )
        })}
      </View>
    </View>
  )
}

export default CustomSelect
